var modifierHomePosition;

$(document).ready(function(){
    initializeModifierIndicator();
    initializeLevelSlider();
});

function initializeModifierIndicator(){
    var defaultModifier = $('#modifiers > .title > li:first-child');
    var curPosition = defaultModifier.offset();
    var defaultWidth = defaultModifier.width();
    
    $('body').append('<div id="modifiersMenuIndicator"></div>');
    curPosition.top = curPosition.top + 155 /*height of header*/ - 6 /* give some room */;
    curPosition.left = curPosition.left + 10 /*make up for padding*/
    modifierHomePosition = curPosition.left;
    var modifierIndicator = $('#modifiersMenuIndicator');
    modifierIndicator.css(curPosition);
    modifierIndicator.width(defaultWidth + 20 /*make up for padding*/);
    
    $('#modifiers > .title > li').click(function(){
        ModifierClicked($(this));
    });
}

function ModifierClicked(clickedElement){
    var modifierIndicator = $('#modifiersMenuIndicator');
    
    var clickedPosition = clickedElement.offset();
    var x2 = clickedPosition.left + 10 /*make up for padding*/ - modifierHomePosition;
    
    modifierIndicator.transition({ x: x2 + 'px', width: (clickedElement.width() + 20 ) + 'px'});
}

function initializeLevelSlider(){
    $('#levelSlider').slider({
        min: 1,
        max: 10,
        slide: function(event, ui){
            $('#varLevel').text(ui.value);
        }
    });
}